<template>
    <div>
        <el-row>
            <el-col :span="8" :offset="8">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.passWord"></el-input>
                    </el-form-item>
                    <el-form-item label="传递对象">
                        <el-input v-model="form.obj.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确认</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <p>{{msg}}</p>
        <button @click='emit'>{{msg}}</button>
    </div>
</template>
<script>
/**
 * name
 * password
 * 
 */
export default {
    name : "user-form",
    data(){
        return {
            form :{
                name : '',
                passWord : '',
                obj : ""
            }
        }
    },
    props:{
        name :{
            type : String,
            default : ''
        },
        passWord :{
            type : String,  
            default : ''
        },
        obj : {
            type : Object,
            default : ()=>{
                return {}
            }
        },
        msg:{
            type:String,
            default:''
        }
    },
    mounted() {
        console.log(this.obj)
        this.form.name=this.name;
        this.form.passWord = this.passWord;
        this.form.obj = this.obj;
    },
    watch: {
        name(v){
            console.log(v)
            this.form.name = v;
        },
        passWord(v){
            this.form.passWord = v;
        },
        obj(v){
            console.log(v)
            this.form.obj = v.name;
        }
    },
    created() {
        this.form.name = this.name ;
        //监听父组件的事件
        this.$on('submit',(arg)=> {
          console.log(arg)
      })
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            console.log(this.form)
            this.$emit( "input", 321)
            this.$emit("submit", ['提交成功'])
        },
        emit () {
            this.$emit('fromDemo')
        },
        
    }

}
</script>